<template>
    <div>
        <div class="fl-left left-mg-xs">
            <el-upload
                    :action="`${path}/api-system/file/upload/account`"
                    :show-file-list="false"
                    :before-upload="checkFile"
                    :headers="{ Authorization: token }"
                    :on-error="uploadError"
                    :on-success="uploadSuccess"
                    class="avatar-uploader"
                    name="file"
            >
                <img :src="userInfo.headImgUrl" class="avatar" v-if="userInfo.headImgUrl"/>
                <i class="el-icon-plus avatar-uploader-icon" v-else></i>
            </el-upload>

            <!-- <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar> -->
        </div>
        <div class="fl-left left-mg-lg">
            <div>用户类型：{{filterRole(userInfo.roleId)}}</div>
            <div>用户名称：{{userInfo.nickName}}</div>
            <div>用户地区：{{userInfo.areaName}}</div>
        </div>
    </div>
</template>
<script>
    import {mapGetters, mapMutations} from 'vuex'

    const path = process.env.VUE_APP_BASE_API
    export default {
        name: 'Person',
        data() {
            return {
                path: path
            }
        },
        computed: {
            ...mapGetters('user', ['userInfo', 'token'])
        },
        methods: {
            ...mapMutations('user', ['ResetUserInfo']),
            filterRole(val) {
                switch (val) {
                    case 2:
                        return '管理员'
                    case 3:
                        return '机构'
                    case 4:
                        return '学校'
                    case 5:
                        return '教育局'
                    default:
                        break;
                }
            },
            checkFile(file) {
                const isJPG = file.type === "image/jpeg";
                const isPng = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPng) {
                    this.$message.error("上传头像图片只能是 JPG或png 格式!");
                    this.fullscreenLoading = false;
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                    this.fullscreenLoading = false;
                }
                return (isPng || isJPG) && isLt2M;
            },
            uploadSuccess(res, file) {
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                    console.log(res.data)
                    this.ResetUserInfo({headerImg: res.data})
                } else {
                    this.$message({
                        type: "warning",
                        message: res.msg,
                    });
                }
            },
            uploadError() {
                this.$message({
                    type: "error",
                    message: "上传失败",
                });
                this.saveFlag = true;
                this.fullscreenLoading = false;
            }

        }
    }
</script>
<style lang="scss">
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>